<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-08-02 17:57:32
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-10-09 16:54:18
 * @FilePath: \orderApp\packageOne\pages\reserve\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<route lang="json5" type="page">
{
  style: {
    navigationStyle: "custom",
    navigationBarTextStyle: "black",
    navigationBarTitleText: "就餐预定",
  },
}
</route>

<template>
  <view>
    <cu-navbar :border="true" textCol="#000000" title="就餐预定" class="con"></cu-navbar>
    <view class="wrap" :style="{ '--height': navHeight + 'px' }">
      <view class="tabsBox flex">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="tabItem flex flex-col"
          :class="mealIdx == index ? 'tabAct' : ''"
          @click="tabChange(index)"
        >
          <span>
            {{ item.name }}
          </span>
          <span class="sub">{{ dayjs(item.start).format('MM.DD') }}-{{ dayjs(item.end).format('MM.DD')}}</span>
        </view>
      </view>

      <view class="flex mainBox">
        <view class="left flex">
          <view
            v-for="(item, index) in curWeeks"
            :key="index"
            class="cu-flex weekItem"
            :class="index == dateIdx ? 'weekAct' : ''"
          >
            <span>{{ item.week }}</span>
            <span class="day">{{ item.day }}</span>
          </view>
        </view>
        <view class="right">
          <view class="cu-flex mealBox">
            <view class="center flex-col" @click="checkAllBreakfast">
              <view class="flex">
                <uv-icon
                  name="tianchong_fuben"
                  custom-prefix="custom-icon"
                  size="38rpx"
                  color="#006241"
                ></uv-icon>
                <span class="color-#006241" style="font-size: 27rpx">早餐</span>
              </view>
              <span class="color-#969799" style="font-size: 23rpx; margin-top: 4rpx">
                已预定{{ curWeekData[dateIdx]?.breakfastSum }}人
              </span>
            </view>
            <view class="center flex-col" @click="checkAllLunch">
              <view class="flex">
                <uv-icon
                  name="tianchong"
                  custom-prefix="custom-icon"
                  size="38rpx"
                  color="#006241"
                ></uv-icon>
                <span class="color-#006241" style="font-size: 27rpx">中餐</span>
              </view>
              <span class="color-#969799" style="font-size: 23rpx; margin-top: 4rpx">
                已预定{{ curWeekData[dateIdx]?.lunchSum }}人
              </span>
            </view>
            <view class="center flex-col" @click="checkAllDinner">
              <view class="flex">
                <uv-icon
                  name="tianchong_fuben2"
                  custom-prefix="custom-icon"
                  size="38rpx"
                  color="#006241"
                ></uv-icon>
                <span class="color-#006241" style="font-size: 27rpx">晚餐</span>
              </view>
              <span class="color-#969799" style="font-size: 23rpx; margin-top: 4rpx">
                已预定{{ curWeekData[dateIdx]?.dinnerSum }}人
              </span>
            </view>
          </view>

          <view class="mealContent flex">
            <view>
              <view v-for="(item, index) in curWeekData" :key="index" class="contentItem">
                <cu-checkbox
                  :isCheck="item.breakfast"
                  :disabled="!item.startBreakfast"
                  @change="changeStatus(item, index, 'breakfast')"
                ></cu-checkbox>
              </view>
            </view>
            <view>
              <view v-for="(item, index) in curWeekData" :key="index" class="contentItem">
                <cu-checkbox
                  :isCheck="item.lunch"
                  :disabled="!item.startLunch"
                  @change="changeStatus(item, index, 'lunch')"
                ></cu-checkbox>
              </view>
            </view>
            <view>
              <view v-for="(item, index) in curWeekData" :key="index" class="contentItem">
                <cu-checkbox
                  :isCheck="item.dinner"
                  :disabled="!item.startDinner"
                  @change="changeStatus(item, index, 'dinner')"
                ></cu-checkbox>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="bottom" :style="{ '--bot': bottom + 8 + 'px' }">
        <view class="tips cu-flex">温馨提示：每日18:00前完成明日预订</view>
        <view class="btnBox">
          <uv-button shape="circle" color="#00754A" @click="submit">
            <span style="font-size: 31rpx">提交预定</span>
          </uv-button>
        </view>
      </view>
    </view>

    <cu-notice ref="notice" tips="预定成功"></cu-notice>
  </view>
</template>

<script lang="ts" setup>
import { getWeekDate } from "@/utils/time";
import { reqPepastInfo, modifyRepast } from "@/service/business/goods/index";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");

import { useUserStore } from "@/store";
const userStore = useUserStore();

const bottom = ref(userStore.pinia_SafeVal.bottom);

const mealIdx = ref(0);
const list = ref([
  { name: "本周", start: "", end: "" },
  { name: "下周", start: "", end: "" },
]);

const weeksOrigin = () => [
  { week: "周一", day: "" },
  { week: "周二", day: "" },
  { week: "周三", day: "" },
  { week: "周四", day: "" },
  { week: "周五", day: "" },
  { week: "周六", day: "" },
  { week: "周日", day: "" },
];
const weeksList0 = ref(weeksOrigin());
const weeksList1 = ref(weeksOrigin());

const curWeeks = ref(weeksOrigin());

// tab页切换更改日期
const tabChange = (idx) => {
  mealIdx.value = idx;
  curWeeks.value = idx ? weeksList1.value : weeksList0.value;
  getPepastInfo();
};

const curWeekData = ref([]);
// 获取当前预定信息
const getPepastInfo = () => {
  let params = {
    beginDate: list.value[mealIdx.value].start,
    endDate: list.value[mealIdx.value].end,
    userId: userStore.userInfo.user.userId,
  };
  reqPepastInfo(params).then((res) => {
    if (res.retCode == 2000) {
      judgCanChange(res.data.mealList);
      curWeekData.value = res.data.mealList;
    }
  });
};

const checkAllBreakfast = () => {
  curWeekData.value.forEach((i) => {
    if (i.startBreakfast == 0) return false;
    if (i.breakfast == 1) {
      i.breakfast = 0;
      return i;
    } else {
      i.breakfast = 1;
      return i;
    }
  });
};
const checkAllLunch = () => {
  curWeekData.value.forEach((i) => {
    if (i.startLunch == 0) return false;
    if (i.lunch == 1) {
      i.lunch = 0;
      return i;
    } else {
      i.lunch = 1;
      return i;
    }
  });  
};
const checkAllDinner = () => {
  curWeekData.value.forEach((i) => {
    if (i.startDinner == 0) return false;
    if (i.dinner == 1) {
      i.dinner = 0;
      return i;
    } else {
      i.dinner = 1;
      return i;
    }
  });  
  
};

//判断时间，每日18：00之前完成明日预定逻辑
const judgCanChange = (data) => {
  data.forEach((item) => {
    let yesterday = dayjs(item.eatDate).subtract(1, "day").format("YYYY-MM-DD");
    if (new Date(`${yesterday} 18:00:00`).valueOf() < new Date().valueOf()) {
      item.startBreakfast = 0;
      item.startLunch = 0;
      item.startDinner = 0;
    } else {
      item.startBreakfast = 1;
      item.startLunch = 1;
      item.startDinner = 1;
    }
  });
};

const changeStatus = (item, index, par) => {
  curWeekData.value[index][par] = Number(!curWeekData.value[index][par]);
};

const notice = ref(null);
const submit = () => {
  modifyRepast({ mealDetailList: curWeekData.value }).then((res) => {
    if (res.retCode == 2000) {   
      getPepastInfo(); 
      notice.value.show();      
    }
  });
};



// 获取navbar高度
const navHeight = ref(0);
const getHeight = () => {
  const instance = getCurrentInstance();
  const query = uni.createSelectorQuery().in(instance);
  query
    .select(".con")
    .boundingClientRect((data) => {
      navHeight.value = data.height;
    })
    .exec();
};

const dateIdx = ref(null);
onMounted(() => {
  getHeight();
  const start = dayjs().startOf("week");
  const end = dayjs().endOf("week");
  list.value[0].start = start.format("YYYY-MM-DD");
  list.value[0].end = end.format("YYYY-MM-DD");
  list.value[1].start = start.add(1, "week").format("YYYY-MM-DD");
  list.value[1].end = end.add(1, "week").format("YYYY-MM-DD");

  // 获取本周和下周的所有日期
  let arr0 = getWeekDate("current", "MM/DD");
  weeksList0.value.forEach((el, index) => {
    el.day = arr0[index];
  });
  let arr1 = getWeekDate("next", "MM/DD");
  weeksList1.value.forEach((el, index) => {
    el.day = arr1[index];
  });

  curWeeks.value = weeksList0.value;
  getPepastInfo();
  dateIdx.value = new Date().getDay() ? new Date().getDay() - 1 : 6;  
});
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: calc(100vh - var(--height));
  display: flex;
  flex-direction: column;
  position: relative;
}
.tabsBox {
  height: 144rpx;
  background: #fff;
  margin-bottom: 16rpx;
  align-items: center;
  .tabItem {
    flex: 1;
    align-items: center;
    font-weight: 600;
    font-size: 35rpx;
    color: #595a5b;
    line-height: 54rpx;

    .sub {
      font-size: 27rpx;
      color: #969799;
    }
  }
  .tabAct {
    color: #00754a;
    .sub {
      color: #00754a;
    }

    &::after {
      content: "";
      display: inline-block;
      width: 47rpx;
      height: 6rpx;
      background: #00754a;
    }
  }
}

.mainBox {
  flex: 1;
  padding: 31rpx;
  background: #fff;
  .left {
    width: 115rpx;
    height: 100%;
    padding-top: 96rpx;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-around;
    .weekItem {
      flex-direction: column;
      width: 100%;
      height: 12%;
      font-weight: 600;
      font-size: 23rpx;
      color: #323233;
      line-height: 38rpx;
      background: #eeeef0;

      border-radius: 8rpx;
      .day {
        font-weight: 400;
        color: #969799;
      }
    }
    .weekAct {
      background: #00754a;
      color: #fff;
      .day {
        color: #fff;
      }
    }
  }
  .right {
    flex: 1;
    padding-left: 31rpx;
    .mealBox {
      height: 96rpx;
      flex: 1;

      view {
        flex: 1;
        justify-content: space-around;
      }
    }

    .mealContent {
      height: calc(100% - 96rpx);
      justify-content: space-around;
      & > view {
        height: 100%;
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: space-around;
      }
    }
  }
}

.bottom {
  width: 100%;
  // position: fixed;
  // bottom: 0;
  background: rgba(212, 233, 226, 0.6);
  border-radius: 23rpx 23rpx 0rpx 0rpx;
  .tips {
    height: 70rpx;
    font-weight: 400;
    font-size: 23rpx;
    color: #595a5b;
  }
  .btnBox {
    width: 100%;
    background: #fff;
    padding: 15rpx 31rpx var(--bot) 31rpx;
    border-radius: 23rpx 23rpx 0rpx 0rpx;
    box-sizing: border-box;
  }
}
</style>
